<script lang="tsx">
import { defineComponent, toRefs, watch, ref, computed } from 'vue';
import { $t } from '@vben/locales';

export default defineComponent({
  name: 'PickColor',
  props: {
    modelValue: {
      type: String,
      required: true
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const { modelValue } = toRefs(props)
    
    // 创建响应式的内部颜色值
    const internalColor = ref(modelValue.value || '#000000')

    // 计算属性来处理 v-model 绑定
    const colorValue = computed({
      get: () => internalColor.value,
      set: (value: string) => {
        internalColor.value = value
        emit('update:modelValue', value)
      }
    })

    // 监听外部 modelValue 的变化
    watch(modelValue, (newColor) => {
      if (newColor !== internalColor.value) {
        internalColor.value = newColor || '#000000'
      }
    }, { immediate: true })

    const handleColorChange = (color: string) => {
      colorValue.value = color
    }

    return () => (
      <section class="w-full">
        <div class="h-[16px] leading-[16px]">
          {/* 设置颜色 */}
            <el-tooltip effect="dark" content={$t('common.colorSettingTxt')} show-after={1000}
              placement="top">
              <span class="inline-block h-[16px]">
                <el-color-picker 
                  style={`background-color: ${internalColor.value};`}
                  modelValue={internalColor.value} 
                  onUpdate:modelValue={handleColorChange} 
                />
            </span>
          </el-tooltip>
        </div>
      </section >
    )
  }
})

</script>
<style scoped lang="scss">
:deep(.el-color-picker),
:deep(.el-color-picker__trigger) {
  width: 14px;
  height: 14px;
  line-height: 0px;
  padding: 0px;
  // border: none;
  border-radius: 7px;
  overflow: hidden;

  span,
  i,
  svg {
    display: none;
  }
}
</style>
